<template>
    <div class="healthy-development">
        <div class="left-area">
            <!-- 顶部3个方框 -->
            <div class="top">
                <div class="box" v-for="(item, index) in countData" :key="index" @click="jumpSearch(item)">
                    <div class="img">
                        <img src="../../assets/images/house.png" alt />
                    </div>
                    <div class="total">
                        <div class="cq" :title="item.qy_desc">{{ item.qy_desc }}</div>
                        <div class="colorSpan">
                            {{ item.qy_num }}
                            <span>{{ item.unit }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="echarts">
                    <!-- 折现柱状图 -->
                    <div style="width:25vw">
                        <chart-block chartID="chart1" :title="BarAndLineOptionData.title" :optionData="BarAndLineOptionData" chartType="getPictorialBarAndLine2" height="40vh" style="padding:0 1vh 2vh 0;"></chart-block>
                    </div>
                    <!-- 圆环图1 多圆环嵌套 -->
                    <div style="width:25vw">
                        <chart-block chartID="chart2" :title="BorderPieOptionData.title" :optionData="BorderPieOptionData" chartType="getMultiPie" height="40vh" titleType="blueBig" :dispatchData="dispatchData" @mouseover="Amouseover" @mouseout="Amouseout"></chart-block>
                    </div>
                </div>
                <!-- 地图显示区域 -->
                <div class="map" style="width:40vw">
                    <mapv-block @circleClick="circleClick" :circleMarkerList="circleMarkerList" :center="center" :zoom="zoom" />
                </div>
            </div>
        </div>
        <div class="right-area">
            <!-- 条形图 -->
            <normal-block chartID="chart4" :title="normalBlockTitle" :isTitle="isTitle" height="56vh">
                <template>
                    <el-tabs v-model="activeName" v-if="healthDataShow" tab-position="bottom" :lazy="true">
                        <div class="radio">
                            <el-radio-group v-model="radio" @change="radioChange">
                                <el-radio :label="item" v-for="(item, index) in healthDataLength" :key="index">{{ healthData[index].title }}</el-radio>
                            </el-radio-group>
                        </div>
                        <el-tab-pane v-for="(item, index) in healthDataLength" label :name="item" :key="index">
                            <div class="enterprise-health-rank" v-if="healthData[index] && activeName == item">
                                <!-- <div class="title">
                  <img src="../../assets/images/left_dotted.png" alt>
                  <p class="wholesale-trade-title">{{ healthData[index].title }}</p>
                  <img src="../../assets/images/right_dotted.png" alt>
                </div> -->
                                <chart-block :chartID="'chart' + Math.random()" :key="index" :optionData="healthData[index]" chartType="getBarRadiusBlock2" height="44vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false" ref="echartsChart"></chart-block>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </normal-block>
            <!-- 圆环图2 -->
            <div>
                <chart-block chartID="chart3" :title="registOptionData.title" :optionData="registOptionData" chartType="getRosePie" height="32vh" style="padding:0 1vh 2vh 0;" titleType="blueBig" :dispatchData="dispatchData" @mouseover="Amouseover" @mouseout="Amouseout"></chart-block>
            </div>
        </div>
    </div>
</template>

<script>
import {
    geteconomyData,
    getCommonData10,
    getQYAnalysisData
} from "@/api/pages.js";
export default {
    name: "healthy-development",
    components: {
        ChartBlock: () => import("@/components/chart-block"),
        NormalBlock: () => import("@/components/normal-block"),
        TableBlock: () => import("@/components/table-block"),
        BashiMap: () => import("@/components/map/bashi-map"),
        MapvBlock: () => import("@/components/mapv-block")
    },
    props: {},
    data() {
        return {
            radio: 1,
            countData: null, // 企业分类汇总
            zoom: 6.5,
            center: { lat: 30, lng: 107.3 },
            circleMarkerList: [
                // { center: [30, 106], radius: 15, color: "yellow", title: "渝中区" }
            ],
            linkDataType: true, // 地图点链接方式
            normalBlockTitle: "",
            activeName: 1,
            healthData: [],
            healthDataShow: false,
            healthDataLength: "",
            // 折线图
            BarAndLineOptionData: {
                LinearGradientColor: [
                    //柱状图渐变色
                    {
                        topColor: "#47eaf9",
                        bottomColor: "#0693d5"
                    }
                ],
                seriesData: [
                    {
                        name: "", //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: "" //数据的单位
                    },
                    {
                        name: "", //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: "" //数据的单位
                    }
                ]
            },
            // 折线图下面圆环
            BorderPieOptionData: {},
            registOptionData: {},
            dispatchData: {}
        };
    },
    mounted() {
        // N005 NP005 重点企业分析-企业时长分布
        this.companyHealthyRank("重庆");
        this.geteconomyData("E014");
        this.getQYtime("N005", "重庆"); // 企业分布时长
        this.getCircleMarkerList("N009", "重庆")
        // 重点企业分析-企业数量
        this.getQYnum("N004", "重庆");
        this.getRegistCapital("N006", "重庆"); // 企业注册资本规模
        document.addEventListener(
            "click",
            () => {
                this.mapPopShow = false;
            },
            true
        );
    },
    methods: {
        // 跳转搜索页面
        jumpSearch(item) {
            console.log(item)
            this.$router.push({
                path: "/enterprise/search",
                query: {
                    city: item.city,
                    qiyeType: item.qiyeType,
                    queryIndex: item.queryIndex
                }
            });
        },
        radioChange(value) {
            this.activeName = value
            console.log(value, this.radio, this.activeName)
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        circleClick(item) {
            console.log("circleClick", item, this.linkDataType)
            if (this.linkDataType) {
                this.companyHealthyRank(item.title);
                this.geteconomyData("E014");
                //console.log("circleClick", JSON.stringify(item)) //item就是circleMarkerList中每个点的数据，可以附加参数并在这里取得
                this.getCircleMarkerList1("N010", item.title)
                this.getQYtime("N005", item.title); // 企业分布时长
                // 重点企业分析-企业数量
                this.getQYnum("N004", item.title);
                this.getRegistCapital("N006", item.title); // 企业注册资本规模
            } else {
                sessionStorage.setItem("companyName", item.title);
                this.$router.push({
                    path: "/enterprise/tabswich/corporateDealings?tabIndex=4&companyId=" + item.id
                });
            }

            document.addEventListener(
                "click",
                () => {
                    this.mapPopShow = false;
                },
                true
            );
        },
        // 重点企业分析-企业数量
        getQYnum(busiCode, areaName) {
            getQYAnalysisData(busiCode, areaName)
                .then(res => {
                    if (res.data.code == 200) {
                        this.countData = [];
                        if (res.data.data.list && res.data.data.list.length > 0) {
                            res.data.data.list.map(item => {
                                if (item.qy_desc.indexOf("上市企业") != -1) {
                                    this.countData.push({
                                        qy_desc: item.qy_desc, qy_num: item.qy_num, unit: item.unit, city: areaName, qiyeType: '上市企业', queryIndex: '0'
                                    })
                                } else if (item.qy_desc.indexOf("四上企业") != -1) {
                                    this.countData.push({
                                        qy_desc: item.qy_desc, qy_num: item.qy_num, unit: item.unit, city: areaName, qiyeType: '四上企业', queryIndex: '2'
                                    })
                                } else if (item.qy_desc.indexOf("高新企业") != -1) {
                                    this.countData.push({
                                        qy_desc: item.qy_desc, qy_num: item.qy_num, unit: item.unit, city: areaName, qiyeType: '高新企业', queryIndex: '1'
                                    })
                                } else {
                                    this.countData.push(item)
                                }

                            })
                            // this.countData = res.data.data.list;

                        } else {
                            this.countData = [
                                { qy_desc: areaName + "上市企业数量", qy_num: 0, unit: "家", city: areaName, qiyeType: '上市企业' },
                                { qy_desc: areaName + "四上企业数量", qy_num: 0, unit: "家", city: areaName, qiyeType: '四上企业' },
                                { qy_desc: areaName + "高新企业数量", qy_num: 0, unit: "家", city: areaName, qiyeType: '高新企业' }
                            ];
                        }
                    }
                })
                .catch(err => { });
        },

        //各行企业健康发展排名-柱状图表
        companyHealthyRank(areaName) {
            getCommonData10({ busiCode: "E069", areaName: areaName })
                .then(res => {
                    this.healthData = [];
                    if (res.data.code === 200) {
                        this.normalBlockTitle = res.data.data.title;
                        res.data.data.seriesData.forEach((item, index) => {
                            item.data.forEach((value, i) => {
                                if (i <= 2) {
                                    value.symbol =
                                        "image://";
                                } else {
                                    value.symbol =
                                        "image://";
                                }
                            });
                            this.healthData.push({
                                title: item.name,
                                total: item.unit,
                                shadowBarGradientColor: {
                                    //渐变色
                                    topColor: "rgba(24,38,68,0.5)",
                                    bottomColor: "rgba(175,76,69,0)"
                                },
                                left: 30,
                                interval: false,
                                seriesData: item.data,
                                colorList: ["#0CFCFF", "#FDD230"],
                                labelRightColor: "#0CFCFF",
                                symbol: "",
                                symbolYellow: ""
                            });
                        });
                        // this.healthDataLength = Math.ceil(this.healthData.length / 2)
                        this.healthDataLength = Math.ceil(this.healthData.length);
                        this.healthDataShow = true;
                    }
                })
                .catch(err => { });
        },
        // 折线图
        geteconomyData(busiCode) {
            geteconomyData(busiCode)
                .then(res => {
                    if (res.data.code == 200) {
                        this.BarAndLineOptionData = {
                            title: res.data.data.title,
                            categoryAxis: res.data.data.categoryAxis, //类目轴数据
                            seriesData: res.data.data.seriesData,
                            LinearGradientColor: [
                                //柱状图渐变色
                                {
                                    topColor: "#FDD230",
                                    bottomColor: " rgba(111, 255, 186, 0.01)"
                                }
                            ],
                            LineCircleColor: "#0CFCFF", //折线图颜色
                            LineCircleBorderColor: "#0CFCFF" //折线图描边颜色
                        };
                    }
                })
                .catch(err => { });
        },
        // 圆环1  重点企业分析-企业时长分布
        getQYtime(busiCode, areaName) {
            getQYAnalysisData(busiCode, areaName)
                .then(res => {
                    const total = res.data.data.seriesData[0].data.reduce(function (
                        preValue,
                        curValue,
                        index,
                        array
                    ) {
                        return preValue + Number(curValue.value);
                    },
                        0);
                    const legendData = res.data.data.seriesData[0].name.split(",");
                    this.BorderPieOptionData = {
                        title: res.data.data.title,
                        unit: res.data.data.seriesData[0].unit,
                        seriesData: res.data.data.seriesData[0].data,
                        legendData,
                        total, //企业总数
                        radius: [86, 100],
                        color: ["#FDD230", "#1FFF9E", "#0CFCFF", "#00BDFB"]
                    };
                })
                .catch(err => { });
        },
        getRegistCapital(busiCode, areaName) {
            getQYAnalysisData(busiCode, areaName)
                .then(res => {
                    let arrData = res.data.data.seriesData[0].data
                    res.data.data.seriesData[0].data = [arrData[3], arrData[2], arrData[0], arrData[1]]
                    this.registOptionData = {
                        title: res.data.data.title,
                        unit: res.data.data.seriesData[0].unit,
                        seriesData: res.data.data.seriesData[0].data
                    };
                })
                .catch(err => { });
        },
        getCircleMarkerList(busiCode, areaName) {
            this.circleMarkerList = []
            getCommonData10({ busiCode: busiCode, areaName: areaName }).then(res => {
                if (res.data.code === 200) {
                    this.linkDataType = true  // 初始化地图或返回地图
                    let circleMarkerList = []
                    res.data.data.list.forEach(data => {
                        circleMarkerList.push({                            center: { lat: data.latitude, lng: data.longtitude },// [data.latitude, data.longtitude],
                            radius: 50, color: "yellow", name: data.area_name, title: data.area_name                        })
                    })
                    this.circleMarkerList = circleMarkerList;
                    //console.log('circle data', JSON.stringify(this.circleMarkerList))
                }
            })
        },
        getCircleMarkerList1(busiCode, areaName) {
            this.circleMarkerList = []
            getCommonData10({ busiCode: busiCode, areaName: areaName }).then(res => {
                if (res.data.code === 200) {
                    this.linkDataType = false  // 下钻成功
                    let circleMarkerList = []
                    res.data.data.list.forEach(data => {
                        circleMarkerList.push({
                            center: { lat: data.LATITUDE, lng: data.LONGTITUDE },// [data.latitude, data.longtitude],
                            radius: 15, color: "yellow", name: "", title: data.name, id: data.id                        })
                    })
                    this.circleMarkerList = circleMarkerList
                    //console.log('circle data', JSON.stringify(this.circleMarkerList))
                }
            })
        },
        Amouseover(e) {
            let _this = this;
            if (e.dataIndex != this.Maxindex)
                this.dispatchData = {
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: _this.Maxindex
                };
        },
        Amouseout(e) {
            let _this = this;
            // this.Maxindex = e.dataIndex;
            this.dispatchData = {
                type: "highlight",
                seriesIndex: 0,
                dataIndex: _this.Maxindex
            };
        }
    }
};
</script>

<style scoped lang="scss">
@function vw($px) {
    @return ($px / 1920) * 100vw;
}
@function vh($px) {
    @return ($px / 1080) * 100vh;
}
.healthy-development {
    width: 100%;
    height: 100%;
    padding: 0 1.3vw;
    padding-top: 7vh;
    padding-bottom: 3vh;
    display: flex;
    justify-content: space-between;
    .left-area {
        padding: 0 30px;
        width: 74%;
        height: 100%;
        box-sizing: border-box;
        .top {
            display: flex;
            justify-content: space-between;
            .box {
                width: 20vw;
                height: 10vh;
                cursor: pointer;
                // background: url(/img/tabbg.68fa1a87.png);
                // background-size: 100% 100%;
                background: url("../../assets/images/border.png") center
                    no-repeat;
                background-size: 100% 100%;
                // border: 1px solid #00e5ed;
                margin-bottom: 2vh;
                display: flex;
                align-items: center;
                .img {
                    margin-left: vw(30);
                    margin-right: vw(10);
                    img {
                        width: 7.6vh;
                        height: 7vh;
                        // float: left;
                        // margin-top: .8vh;
                        margin-right: 0.5vh;
                    }
                }
                .total {
                    width: 55%;
                    height: 7vh;
                    // line-height: 7vh;
                    margin-right: 0.5vh;
                    .cq {
                        color: #ffffff;
                        font-size: vw(18);
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .colorSpan {
                        font-size: vw(32);
                        color: #00e5ed;
                        font-weight: 500;
                        span {
                            font-size: vw(18);
                            color: #ffffff;
                        }
                    }
                }
            }
        }
        .bottom {
            display: flex;
            .echarts {
                margin-right: 3vw;
            }
            .map {
                background: #fff;
            }
        }
    }
    .right-area {
        width: 26%;
        height: 100%;
        // // 右侧顶部框框
        // .enterprise-health-rank {
        //   .wholesale-trade-title {
        //     color: #ffffff;
        //     text-align: center;
        //     font-size: 0.85vw;
        //     line-height: 3vh;
        //     padding: 0 0.5vw;
        //     font-family: Microsoft YaHei;
        //     white-space: nowrap;
        //   }
        // }
    }
}

// // 左侧底部图形样式
// .enterprise-health-rank {
//   .title {
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     margin-top: 1vh;
//   }
//   .wholesale-trade-title {
//     color: #ffffff;
//     text-align: center;
//     font-size: 0.85vw;
//     line-height: 3vh;
//     padding: 0 0.5vw;
//     font-family: Microsoft YaHei;
//     white-space: nowrap;
// }
// }
</style>
<style lang="scss">
.radio {
    display: flex;
    justify-content: space-around;
    margin-top: 2vh;
    /deep/.el-radio {
        /deep/.el-radio__label {
            color: #fff !important;
        }
        /deep/ .is-checked {
            /deep/.el-radio__inner {
                background: #fff !important;
                border: #fff;
            }
        }
    }
}
.el-radio__inner {
    background: transparent;
}
.el-tabs__header {
    display: none;
}
// .healthy-development {
//   .el-tabs__nav-wrap:after {
//     background: transparent;
//   }
//   .el-tabs__nav {
//     float: none;
//     text-align: center;
//   }
//   .el-tabs--bottom .el-tabs__header.is-bottom {
//     margin-bottom: 0;
//     margin-top: 0.5vh;
//   }
//   .el-tabs__item.is-active {
//     color: #0cfcff;
//     width: 0.5vw;
//     height: 0.8vh;
//     background: #0cfcff;
//     border-radius: 3px;
//   }
//   .el-tabs__item {
//     color: #8aa5a5;
//     width: 0.5vw;
//     height: 0.8vh;
//     background: #8aa5a5;
//     margin: 0.5vh;
//     border-radius: 3px;
//   }
// }
</style>
